<template>
  <div class="main_box">
    <el-row class="header-row">
      <el-col>
        <div class="search_wrap">
          <el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
            <el-form-item prop="reportCode">
              <el-input v-model="filters.reportCode" clearable placeholder="条码号"></el-input>
            </el-form-item>
            <el-form-item prop="itemName">
              <el-input v-model="filters.itemName" clearable placeholder="送检项目"></el-input>
            </el-form-item>
            <el-form-item prop="patientName">
              <el-input v-model="filters.patientName" clearable placeholder="患者姓名"></el-input>
            </el-form-item>
            <!--<el-form-item prop="date">
              <el-date-picker v-model="filters.date" :clearable="true" type="datetimerange" range-separator="至" start-placeholder="送检开始日期" end-placeholder="送检结束日期"></el-date-picker>
            </el-form-item>-->
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="listReport()">查询</el-button>
              <el-button icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col>
        <div class="opration_wrap">
          <el-tooltip content="刷新" placement="top">
            <el-button circle icon="el-icon-refresh-right" @click="reload" size="mini"></el-button>
          </el-tooltip>
          <el-button size="mini" plain type="success" icon="el-icon-magic-stick" v-has="permissionBack" @click="handleClickBatchReback">批量撤回</el-button>
        </div>
      </el-col>
    </el-row>

    <el-row ref="tableRow">
      <!-- 列表 -->
      <el-table :data="reportList" ref="reportTable" :fit="true" @selection-change="changeSelect" highlight-current-row>
        <el-table-column type="selection" width="50" :selectable="checkSelectable"></el-table-column>
        <el-table-column prop="reportBeginTime" label="送检时间"></el-table-column>
        <el-table-column prop="reportCode" label="条码号"></el-table-column>
        <el-table-column prop="searchCode" label="查询号"></el-table-column>
        <el-table-column width="150px" align="center" label="姓名-性别-年龄">
          <template slot-scope="scope">
            <span>{{ scope.row.patientName }} - {{ formatSex(scope.row.patientSex) }} - {{ scope.row.patientAge }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="itemName" width="180px" label="送检项目"></el-table-column>
        <el-table-column width="200px" align="center" label="医院-科室-医生">
          <template slot-scope="scope">
            <span>{{ scope.row.hospitalName }} - {{ scope.row.officeName }} - {{ scope.row.doctorName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="institutionName" label="医检机构" width="200"></el-table-column>
        <el-table-column prop="syUserName" label="收样员" width="120"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-has="permissionBack" v-if="scope.row.collectState === 10" @click="handleClickReback(scope.$index, scope.row)" size="mini">撤回</el-button>
            <el-button v-has="permissionBack" v-if="scope.row.collectState === 7" @click="handleClickCancalTransfer(scope.$index, scope.row)" size="mini">取消转送</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, jumper, next, pager, prev"
        :total="page.pageTotal"
      ></el-pagination>
    </el-row>
  </div>
</template>
<script>
import * as message from '@/constants/message';
import { FORMAT_DATE_YYYY_MM_DD } from '@/constants/constants';
import CollectApi from '@/api/collect/collect';

export default {
  inject: ['reload'], //注入局部刷新
  data() {
    return {
      reportList: [],
      selectIds: [],
      filters: {
        reportCode: '',
        patientName: '',
        hospitalId: '',
        institutionId: '',
        itemName: '',
        reportState: '',
        state: '1',
        date: [],
      },
      page: {
        pageNo: 1,
        pageSize: 20,
        pageTotal: 0,
      },
      hospitalList: [],
      institutionList: [],

      permissionBack: 'SYSTEM_MANAGER_COLLECT_LIST_BACK',
    };
  },
  created() {
    this.init();
    window.addEventListener('keydown', this.keyDown);
  },
  mounted() {
    // 为了实现手机端下拉框可以打字搜索
    this.$Utils.removeSelectReadOnly();
  },
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false);
  },
  methods: {
    init() {
      let _this = this;
      _this.listReport();
      _this.getTableHeight();
    },
    keyDown(e) {
      //如果是回车则执行查询方法
      if (e.keyCode == 13) {
        this.listReport();
      }
    },


    handleSizeChange(size) {
      this.page.pageSize = size;
      this.listReport();
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.listReport();
    },
    resetForm() {
      this.$refs.searchForm.resetFields();
      this.page.pageNo = 1;
      this.listReport();
    },
    formatSex(cellValue) {
      if (cellValue === 1) {
        return '男';
      } else if (cellValue === 2) {
        return '女';
      }
    },
    formatReportState(cellValue) {
      if (cellValue === 0) {
        return '检测中';
      } else if (cellValue === 1) {
        return '已出结果';
      }
    },
    formatDate(row, column, cellValue) {
      let _this = this;
      return _this.$Utils.formatDate(cellValue, FORMAT_DATE_YYYY_MM_DD);
    },
    formatDateTime(row, column, cellValue) {
      let _this = this;
      return _this.$Utils.formatDate(cellValue, 'yyyy-MM-dd hh:mm:ss');
    },
    checkSelectable(row) {
      return row.collectState == 10;
    },
    changeSelect(val) {
      this.selectIds = [];
      for (let i = 0; i < val.length; i++) {
        this.selectIds.push(val[i].rcuId);
      }
    },
    handleClickBatchReback() {
      let _this = this;
      if (_this.selectIds.length > 0) {
        this.$confirm('是否批量撤回' + _this.selectIds.length + '个标本', message.TITLE_PROMPT, {}).then(() => {
          CollectApi.updateCollectState({ rcuIdList: _this.selectIds, updateType: 4 }).then((res) => {
            this.$Utils.notifySuccess();
            _this.listReport();
          });
        });
      } else {
        this.$Utils.notifyError('请选择你要撤回的标本！');
      }
    },

    handleClickReback(index, row) {
      let _this = this;
      this.$confirm('是否撤回该标本', message.TITLE_PROMPT, {}).then(() => {
        CollectApi.updateCollectState({
          rcuIdList: [].concat(row.rcuId),
          updateType: 4,
        }).then((res) => {
          this.$Utils.notifySuccess();
          this.reportList.splice(index, 1);
        });
      });
    },
    handleClickCancalTransfer(index, row) {
      let _this = this;
      this.$confirm('是否取消转送该标本', message.TITLE_PROMPT, {}).then(() => {
        CollectApi.updateCollectState({
          rcuIdList: [].concat(row.rcuId),
          updateType: 6,
        }).then((res) => {
          this.$Utils.notifySuccess();
          this.reportList.splice(index, 1);
        });
      });
    },
    listReport() {
      let _this = this;
      let cond = {
        reportCode: _this.filters.reportCode,
        patientName: _this.filters.patientName,
        itemName: _this.filters.itemName,
        hospitalId: _this.filters.hospitalId,
        collectFlag: 3,
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
      };
      CollectApi.listCollectReport(cond).then((res) => {
        _this.reportList = res.data.list;
        _this.page.pageTotal = res.data.total;
      });
    },
  },
};
</script>
<style lang="scss" src="@/assets/css/views/content.scss" scope></style>
